<template>
  <div class="app-container">
    <!-- <div class="search-container" style="padding-bottom: 18px; display: flex">
      <el-button type="primary" style="margin-left: 10px" @click="createMenu"
        >添加菜单</el-button
      >
    </div> -->

    <el-card shadow="never" class="table-container">
      <el-table
        :data="tableData"
        row-key="id"
        style="width: 100%"
        default-expand-all
      >
        <el-table-column prop="id" width="100" label="编号" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="icon" label="图标" />
        <el-table-column prop="path" label="访问路径" />
        <el-table-column prop="component" label="组件" />
        <el-table-column sortable prop="createTime" label="添加时间">
          <template #default="scope">
            {{ formatDateTime(new Date(scope.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleUpdate(scope.row)"
            >
              更新
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="updateDialogFormVisible" title="更新菜单" width="800">
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px; margin-top: 20px"
      >
        <el-form-item label="ID" style="width: 400px">
          <el-input disabled v-model="curRow.id" />
        </el-form-item>
        <el-form-item label="标题" style="width: 400px">
          <el-input v-model="curRow.title" />
        </el-form-item>
        <el-form-item label="名称" style="width: 400px">
          <el-input v-model="curRow.name" />
        </el-form-item>
        <el-form-item label="图标" style="width: 400px">
          <el-input v-model="curRow.icon" />
        </el-form-item>
        <el-form-item label="访问路径" style="width: 400px">
          <el-input v-model="curRow.path" />
        </el-form-item>
        <el-form-item label="组件" style="width: 400px">
          <el-input disabled v-model="curRow.component" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdate"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="createDialogFormVisible" title="添加菜单" width="800">
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px; margin-top: 20px"
      >
        <el-form-item label="分类">
          <el-select
            @change="parentMenuChage"
            v-model="params.parentId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="v in parentMenuList"
              :key="v.parentId"
              :label="v.desc"
              :value="v.parentId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请输入标题"
        /></el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.icon" placeholder="请输入图标" />
        </el-form-item>
        <el-form-item label="访问路径">
          <el-input v-model="form.path" placeholder="请输入访问路径" />
        </el-form-item>
        <el-form-item label="组件">
          <el-input v-model="form.component" placeholder="请输入组件" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="createDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreate"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import MenuAPI from "@/api/menu";
import DistrictAPI from "@/api/district";
import { ElMessage } from "element-plus";
import { tr } from "element-plus/es/locale";

const params: any = ref({
  aqiPreId: null,
  beginNum: 0,
  fcity: null,
  fdatetime: null,
  fprovince: null,
  pageNum: 1,
  pageSize: 4,
  state: 1,
});

const form: any = reactive({
  parentId: "",
  title: "",
  name: "",
  icon: "",
  path: "",
  component: "",
});

const updateDialogFormVisible = ref(false);

const createDialogFormVisible = ref(false);

const curRow: any = ref({});

const pageRes = ref({
  totalPage: 0,
  totalRow: 0,
});

const tableData: any = ref([]);

const parentMenuList: any = ref([]);

function reqTableList() {
  MenuAPI.getMenuList().then((res) => {
    tableData.value = [];
    parentMenuList.value = [];
    parentMenuList.value.push({
      parentId: 0,
      desc: "一级菜单",
    });
    for (const v of res) {
      tableData.value.push(v);
      parentMenuList.value.push({
        parentId: v.id,
        desc: v.title,
      });
    }
  });
}

function pageChange(v: any) {
  console.log(v);
  console.log();
  params.value.pageNum = v;
  reqTableList();
}

function pad(num: any) {
  return num.toString().padStart(2, "0");
}

function formatDateTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function verify(row: any) {
  curRow.value = Object.assign({}, row);
  console.log(curRow.value);
  updateDialogFormVisible.value = true;
}

function handleUpdate(row: any) {
  curRow.value = Object.assign({}, row);
  console.log(curRow.value);
  updateDialogFormVisible.value = true;
}

onMounted(() => {
  reqTableList();
});

function parentMenuChage(v: any) {
  console.log(v);
  form.parentId = v;
}

function confirmUpdate() {
  MenuAPI.updateMenu(curRow.value).then((res) => {
    ElMessage({
      type: "success",
      message: "更新成功",
    });
    updateDialogFormVisible.value = false;
    reqTableList();
  });
}

function handleDelete(row: any) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "确认",
  }).then(() => {
    MenuAPI.deleteMenu(row.id).then((res) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      reqTableList();
    });
  });
}

function createMenu() {
  form.parentId = "";
  form.title = "";
  form.name = "";
  form.icon = "";
  form.path = "";
  form.component = "";
  createDialogFormVisible.value = true;
}

function confirmCreate() {
  if (form.parentId === "") {
    ElMessage({
      type: "warning",
      message: "请选择菜单分类",
    });
    return;
  }
  if (form.title == "") {
    ElMessage({
      type: "warning",
      message: "请输入标题",
    });
    return;
  }
  if (form.title.length > 200) {
    ElMessage({
      type: "warning",
      message: "标题太长",
    });
    return;
  }
  if (form.name == "") {
    ElMessage({
      type: "warning",
      message: "请输入名称",
    });
    return;
  }
  if (form.name.length > 200) {
    ElMessage({
      type: "warning",
      message: "名称太长",
    });
    return;
  }
  if (form.icon == "") {
    ElMessage({
      type: "warning",
      message: "请输入图标",
    });
    return;
  }
  if (form.icon.length > 200) {
    ElMessage({
      type: "warning",
      message: "图标长度太长",
    });
    return;
  }
  if (form.path == "") {
    ElMessage({
      type: "warning",
      message: "请输入路径",
    });
    return;
  }
  if (form.path.length > 200) {
    ElMessage({
      type: "warning",
      message: "路径长度太长",
    });
    return;
  }
  if (form.component == "") {
    ElMessage({
      type: "warning",
      message: "请输入组件",
    });
    return;
  }
  if (form.component.length > 200) {
    ElMessage({
      type: "warning",
      message: "组件名称太长",
    });
    return;
  }
  MenuAPI.createMenu(form).then((res) => {
    ElMessage({
      type: "success",
      message: "添加成功",
    });
    createDialogFormVisible.value = false;
    form.parentId = "";
    form.title = "";
    form.name = "";
    form.icon = "";
    form.path = "";
    form.component = "";
    reqTableList();
  });
}
</script>
